<template>
  <div class="containers">
    <Toolbar v-if="bpmnModeler" :modeler="bpmnModeler" @save="handleSaveXML" />
    <div class="main-content">
      <div id="bpmn-container" class="canvas" ref="bpmnCanvas"></div>
      <!-- 自定义组件面板 -->
      <CustomPalette v-if="bpmnModeler" :modeler="bpmnModeler" />
      <!-- 面板切换按钮 - 移动到面板外部 -->
      <div class="panel-toggle" :class="{ 'collapsed': isPanelCollapsed }" @click="togglePanel">
        <el-icon :size="16">
          <CaretLeft v-if="isPanelCollapsed" />
          <CaretRight v-else />
        </el-icon>
      </div>
      <div class="property-panel-container" :class="{ 'panel-collapsed': isPanelCollapsed }">
        <PropertyPanel 
          v-if="bpmnModeler" 
          :modeler="bpmnModeler" 
          v-show="!isPanelCollapsed"
          :assignee-options="props.assigneeOptions"
          :candidate-user-options="props.candidateUserOptions"
          :candidate-group-options="props.candidateGroupOptions" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElIcon } from 'element-plus';
import { CaretLeft, CaretRight } from '@element-plus/icons-vue';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import 'bpmn-js/dist/assets/bpmn-js.css'
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import customTranslate from './ProcessDesign/modules/Translate';
import Toolbar from './ProcessDesign/components/Toolbar.vue';
import PropertyPanel from './ProcessDesign/components/PropertyPanel.vue';
import CustomPalette from './ProcessDesign/components/CustomPalette.vue';
import { defaultXml } from './ProcessDesign/config';
import CustomContextPad from "./ProcessDesign/modules/ContextPad";
import FlowableModdle from './ProcessDesign/config/flowable.json';
import './ProcessDesign/styles/warning-node.css';

import type Canvas from 'diagram-js/lib/core/Canvas'

// 定义组件 props
export interface Props {
  // 添加审批人、候选用户、候选组的选项数据
  assigneeOptions?: Array<{ label: string; value: string }>;
  candidateUserOptions?: Array<{ label: string; value: string }>;
  candidateGroupOptions?: Array<{ label: string; value: string }>;
}

// 定义事件发射
const emit = defineEmits<{
  (e: 'save', xml: string): void;
}>();

const props = defineProps<Props>();

const bpmnModeler = ref<BpmnModeler>();
const isPanelCollapsed = ref(false);

// 处理保存XML事件
const handleSaveXML = (xml: string) => {
  // 将事件传递给父组件
  emit('save', xml);
};

const togglePanel = () => {
  isPanelCollapsed.value = !isPanelCollapsed.value;
};

onMounted(async () => {
  await initModeler();
  await createNewDiagram();
});

const initModeler = async () => {
  const container = document.getElementById('bpmn-container');
  if (!container) {
    console.error('找不到bpmn-container元素');
    return;
  }

  try {
    bpmnModeler.value = new BpmnModeler({
      container: container,
      additionalModules: [
        customTranslate,
        CustomContextPad,
        {
          __init__: ['flowableModdle'],
          flowableModdle: ['value', FlowableModdle],
        },
        // 禁用官方palette面板
        {
          paletteProvider: ['value', null]
        }
      ],
      moddleExtensions: {
        flowable: FlowableModdle,
      },
      // 通过配置禁用palette
      palette: {
        parent: null
      }
    });
  } catch (error) {
    console.error('初始化modeler失败', error);
  }
};

// 创建新的流程图
const createNewDiagram = async () => {
  if (!bpmnModeler.value) {
    console.error('modeler未初始化');
    return;
  }
  try {
    await bpmnModeler.value.importXML(defaultXml);
    // 调整视图居中显示
    const canvas = bpmnModeler.value.get<Canvas>('canvas');
    if (canvas) {
      canvas.zoom('fit-viewport');
    }
  } catch (error) {
    console.error('创建流程图失败', error);
  }
};

defineOptions({
  name: 'VDesign'
});
</script>

<style lang="scss">
.containers {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // 添加设计器外框
  border: 2px solid #e8e8e8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.main-content {
  display: flex;
  flex: 1;
  height: calc(100% - 48px); // 调整高度计算以适配工具栏高度
  position: relative;
  overflow: hidden;
}

.canvas {
  flex: 1;
  height: 100%;
  position: relative;
  // 添加画布区域边框
  border: 1px solid #e5e7eb;
  background-image: 
    linear-gradient(90deg, rgba(220, 220, 220, 0.3) 1px, transparent 1px),
    linear-gradient(rgba(220, 220, 220, 0.3) 1px, transparent 1px);
  background-size: 20px 20px;
  
  // 禁用选中时的黑色边框
  &:focus {
    outline: none;
  }
  
  * {
    outline: none;
  }
}

.property-panel-container {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  // 增强属性面板边框和阴影
  border: 1px solid #e8e8e8;
  border-right: none; // 右侧不需要边框
  border-radius: 8px 0 0 8px;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  z-index: 100;

  &.panel-collapsed {
    transform: translateX(100%);
  }
}

.panel-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 56px;
  // 增强切换按钮边框设计
  border: 2px solid #e8e8e8;
  border-right: none;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 101;
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  right: 510px; // 默认位置：面板宽度400px的左侧

  // 面板折叠时的样式
  &.collapsed {
    right: 0;
    border-right: 2px solid #e8e8e8;
    border-radius: 8px 0 0 8px;
  }

  &:hover {
    border-color: #3b82f6;
    transform: translateY(-50%) translateX(-2px);
    box-shadow: -4px 0 12px rgba(59, 130, 246, 0.2);
  }

  .el-icon {
    font-size: 14px;
    color: #606266;
    transition: color 0.2s ease;
  }

  &:hover .el-icon {
    color: #3b82f6;
  }
}
</style>
